<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  经过计算属性产生的总价：{{totalPrice}}
</div>
<script src="../js/vue.js"></script>
<script>
  const aaa = new Vue({
    el: "#app",
    data: {
      message: "hello,guys",
      books: [
        {id: 0, name: "计算机组成原理", price: 50},
        {id: 1, name: "操作系统", price: 60},
        {id: 2, name: "计算机网络", price: 70},
        {id: 3, name: "数据结构", price: 80}
      ]
    },
    computed: {
      totalPrice: function () {
        let totalPrice = 0;
        for (let i = 0; i < this.books.length; i++) {
          totalPrice += this.books[i].price;
        }
        return totalPrice;
      }
    }
  })
</script>

</body>
</html>